<!-- staff list -->
<template>
  <GgPage pageType="2" title="Staff">
    <template v-slot:left>
      <div class="mar-l-b">
        <gg-create-button @click="addStaffForm" label="Add staff" />
      </div>
      <gg-flex-menus
        :menus="menuDatas"
        @select="menuSelect"
        :default-active="activeIndex"
      />
      <div><router-link to="/staffInfo">staff-info</router-link></div>
      <div><router-link to="/staffInfoEdit">staffInfoEdit</router-link></div>
      <div><router-link to="/privileges">privileges</router-link></div>
    </template>
    <div class="location-select" slot="topSelect">
      <baseGGSelect v-model="locationVal" :inline="true" placeholder="selef788">
        <md-option
          v-for="(item, index) in locationOption"
          :key="index"
          :value="item"
        >
          {{ item }}
        </md-option>
      </baseGGSelect>
    </div>
    <edoovo-table
      height="100%"
      ref="multipleTable"
      :data="tableData"
      rowKey="id"
      title="Active Staff"
      defaultValue="-"
      class="list-tableBox"
      v-loading="isLoading"
      @sortChange="_onSortChange"
      :sort="sort"
    >
      <!-- ===== -->
      <!-- 空状态 -->
      <!-- ===== -->
      <div slot="empty" style="text-align: center">
        <div
          style="
            width: 213px;
            text-align: center;
            border-radius: 50%;
            margin-bottom: 12px;
            line-height: 200px;
          "
        >
          <img
            style="width: 100%"
            :src="require('@/assets/images/products/noData.svg')"
          />
        </div>
        <p style="font-size: 22px">No lessons yet.</p>
      </div>
      <!-- ======= -->
      <!-- 分页组件 -->
      <!-- ======= -->
      <edoovo-pagination
        slot="pagination"
        @size-change="_pageSizeChange"
        @current-change="_pageChange"
        :current-page="pageNumber"
        :page-size="pageSize"
        :total="totalNum"
      />
      <!-- ====== -->
      <!-- 筛选组件 -->
      <!-- ====== -->
      <div v-if="filterRenderData.length" class="list-filterBox" slot="filter">
        <base-filter
          ref="tablefilter"
          @filterCallback="_filterCallback"
          :renderData="filterRenderData"
          :multKeys="multKeys"
        />
      </div>
      <!-- =========== -->
      <!-- 每一项column -->
      <!-- =========== -->
      <edoovo-table-column
        size="L"
        label="Name"
        class="user_name"
        prop="name"
        sortName="name"
        :tooltip="true"
        v-slot="{ row }"
        @click="
          () => {
            this.$router.push({ name: 'personalInfo' });
          }
        "
      >
        <div class="table-cell-box">
          <head-img
            class="table-cell-img"
            :src="row.avatar ? `${row.avatar}?${+new Date()}` : ``"
            :firstName="row.firstName"
            :lastName="row.lastName"
            line-height="32"
          />
          <span class="table-cell-name">{{ row.name }}</span>
        </div>
      </edoovo-table-column>
      <edoovo-table-column
        size="L"
        label="Email"
        prop="email"
        sortName="email"
        v-slot="{ row }"
        :getTooltipText="(row) => `${row.email}`"
      >
        {{ row.email }}
      </edoovo-table-column>
      <edoovo-table-column
        size="M"
        label="Phone number"
        prop="phone"
        sortName="phone"
      />
      <edoovo-table-column
        size="M"
        label="Job title"
        prop="jobTitle"
        sortName="jobTitle"
        v-slot="{ row }"
        :getTooltipText="(row) => `${row.jobTitle}`"
      >
        {{ row.jobTitle }}
      </edoovo-table-column>
      <edoovo-table-column
        size="S"
        label="Type"
        prop="type"
        sortName="type"
        v-slot="{ row }"
        :getTooltipText="(row) => `${row.type}`"
      >
        {{ row.type }}
      </edoovo-table-column>
      <!-- ====== -->
      <!-- action -->
      <!-- ====== -->
      <edoovo-table-column v-slot="{ row }" key="action">
        <el-tooltip
          content="Edit"
          popper-class="edoovo-table-cell-tooltip"
          :visible-arrow="false"
        >
          <gg-submit-button @click="() => {}"> Edit </gg-submit-button>
        </el-tooltip>
        <gg-dropdown>
          More
          <template slot="menus">
            <gg-dropdown-item @click="openResetPwd">
              Reset password
            </gg-dropdown-item>
            <gg-dropdown-item @click="archiveStaff(row.id)">
              Archive
            </gg-dropdown-item>
            <gg-dropdown-item @click="deleStaff(row.id)">
              Delete
            </gg-dropdown-item>
          </template>
        </gg-dropdown>
      </edoovo-table-column>
    </edoovo-table>
    <BaseFormDialog
      v-model="addStaffVisible"
      title="Add staff"
      :data="addStaffData"
      @submit="submit"
      textReminder="* indicates a required field"
      :renderPass="renderPass"
    >
      <template slot="renderHtml" slot-scope="scope">
        <baseGGSelect
          v-if="scope.data.key === 'role'"
          v-model="scope.data.value"
          placeholder="Role *"
          class="float"
        >
          <md-option
            v-for="item in roleList"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </md-option>
        </baseGGSelect>
        <baseGGSelect
          v-if="scope.data.key === 'location'"
          v-model="scope.data.value"
          placeholder="Location *"
          :multiple="true"
          class="float"
        >
          <md-option
            v-for="item in locationList"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </md-option>
        </baseGGSelect>
      </template>
    </BaseFormDialog>
    <gg-Dialog :visible.sync="resetPwdShow" :before-close="cancelResetPwd">
      <div slot="title">
        Reset password for <span class="title-bold">Ada Yeo</span>
      </div>
      <div class="dialogContent2">
        <gg-switch
          v-model="autoEmail"
          active-color="#1A73E8"
          inactive-color="#445469"
          @change="changeSwitch"
        />
        <div class="switch-txt">
          Automatically generate a password link and send to the user
        </div>
      </div>
      <div v-if="!autoEmail" class="mar-t-10">
        <gg-input
          :key="resetPwdData.key"
          :ref="resetPwdData.key"
          v-model="resetPwdData.value"
          filedType="input"
          :type="resetPwdData.type"
          :placeholder="resetPwdData.placeholder"
          :error="pwdError"
          autofocus
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <gg-cancel-button @click="cancelResetPwd">Cancel</gg-cancel-button>
        <gg-submit-button :disabled="isDisabled" @click="submitResetPwd"
          >Reset</gg-submit-button
        >
      </span>
    </gg-Dialog>

    <Snackbar
      :visible.sync="snackbarData.visible"
      :content="snackbarData.content"
    />
  </GgPage>
</template>

<script>
export default {
  components: {},
  watch: {
    "resetPwdData.value": function (res) {
      this.pwdError.show = res.length < 8;
      this.isDisabled = this.pwdError.show && !this.autoEmail;
    },
    addStaffData: {
      handler(res) {
        let roleValue = res.find((item) => item.key === "role").value !== "",
            locationValue = res.find((item) => item.key === "location").value.length
        this.renderPass = roleValue && locationValue > 0;
      },
      deep: true,
    }
  },
  data() {
    return {
      menuDatas: [
        {
          name: "Staff",
          key: "Staff",
          active: true,
          children: [
            {
              name: "Active",
              key: "Active",
            },
            {
              name: "Archived",
              key: "Archived",
            },
          ],
        },
      ],
      activeIndex: "Active",
      isLoading: false,
      sort: { name: "createDate", type: "desc" },
      pageNumber: 1,
      pageSize: 20,
      totalNum: 4,
      tableData: [
        {
          id: "5f7c9c02672f402a05501de1",
          name: "Joanna Doe",
          avatar: require("@/assets/logo.png"),
          firstName: "f1",
          lastName: "L1",
          gender: "Female",
          nationality: "Singaporean",
          email: "J.D@edoovo.com",
          phone: "+65 67912323",
          roles: "Registrar",
          jobTitle: "Teacher",
          type: "Full-time",
          status: "Active",
          canDelete: false,
        },
        {
          id: "5f7c9c02672f402a05501de2",
          name: "Eric Wong",
          firstName: "f2",
          lastName: "L2",
          gender: "Male",
          nationality: "Singaporean",
          email: "Jordon.DanielFa@edoovo.com",
          phone: "+65 67912323",
          roles: "Curriculum Specialist",
          jobTitle: "Teacher",
          type: "Full-time",
          status: "Deleted",
          canDelete: true,
        },
      ],
      filterRenderData: [
        { filterKey: "name", type: "input" },
        { filterKey: "Email", type: "input" },
        { filterKey: "Phone No.", type: "input" },
        {
          filterKey: "Job title",
          type: "radio",
          radioData: [
            { key: "Admin", value: "Admin" },
            { key: "Registrar", value: "Registrar" },
          ],
        },
        {
          filterKey: "Type",
          type: "radio",
          radioData: [
            { key: "Full-time1", value: "Full-time1" },
            { key: "Part-time", value: "Part-time" },
          ],
        },
      ],
      multKeys: [],
      locationVal: "All",
      locationOption: ["All", "Bukit Panjang", "Punggol", "Jurong west"],
      resetPwdShow: false,
      autoEmail: true,
      resetPwdData: {
        type: "password",
        value: "",
        placeholder: "Password",
        key: "formPassword",
        reg: /^[\S]{8,}$/,
        errorText: "Must have at least 8 characters",
      },
      pwdError: {
        show: false,
        message: "Must have at least 8 characters",
      },
      isDisabled: false,
      snackbarData: {
        visible: false,
        content: "",
      },
      addStaffVisible: false,
      renderPass: false,
      roleList: [
        {
          value: "Administrator",
          label: "Administrator",
        },
        {
          value: "Manager",
          label: "Manager",
        },
        {
          value: "Teacher",
          label: "Teacher",
        },
      ],
      locationList: [
        {
          value: "All",
          label: "All",
        },
        {
          value: "Yio Chu Kang",
          label: "Yio Chu Kang",
        },
        {
          value: "Bukit Panjang",
          label: "Bukit Panjang",
        },
      ],
      addStaffData: [
        {
          placeholder: "First name *",
          key: "firstName",
          value: "",
          autofocus: true,
          float: true,
          reg: /^[\S]{2,4}$/,
          errorText: "名字为2-4个字，不含有空格",
        },
        {
          placeholder: "Last name *",
          key: "lastName",
          value: "",
          float: true,
          reg: /^[\S]{2,4}$/,
          errorText: "名字为2-4个字，不含有空格",
        },
        {
          placeholder: "Email address *",
          key: "emailAddress",
          value: "",
          reg: /^\w+@[a-z0-9]+\.[a-z]{2,4}$/,
          errorText: "Invalid email address",
        },
        {
          placeholder: "Role *",
          key: "role",
          float: true,
          value: "",
          renderHtml: true,
        },
        {
          placeholder: "Location *",
          key: "location",
          value: null,
          renderHtml: true,
        },
      ],
    };
  },
  methods: {
    menuSelect(key, item) {
      this.activeIndex = key;
    },
    _getData() {
      console.log("加载新数据");
    },
    _onSortChange(sort) {
      this.sort = sort;
      this._getData();
    },
    _pageChange(val) {
      this.pageNumber = val;
      this._getData();
    },
    _pageSizeChange(val) {
      this.pageSize = val;
      this._getData();
    },
    _filterCallback(data) {
      console.log("用户选的筛选条件 === ", data);
    },
    openResetPwd(id) {
      this.resetPwdShow = true;
      this.autoEmail = true;
      this.isDisabled = false;
      this.resetPwdData.value = "";
    },
    changeSwitch(val) {
      this.resetPwdData.value = "";
      if (val) {
        this.isDisabled = !val;
      } else {
        this.resetPwdData.value = "";
        this.isDisabled = !val;
      }
    },
    cancelResetPwd() {
      this.resetPwdShow = false;
    },
    submitResetPwd() {
      this.resetPwdShow = false;
      
      this.snackbarData = {
        visible: true,
        content: "Password has been reset",
      };
    },
    deleStaff(id) {
      this.$confirm(
        "Once deleted, the teacher will not be able to access the app.",
        "Delete teacher ?",
        {
          cancelButtonText: "Cancel",
          confirmButtonText: "Delete",
          cancelButtonClass: "gg_cancel_button",
          confirmButtonClass: "gg_submit_button",
          customClass: "gg_confirm",
        }
      ).then(() => {
        this.snackbarData = {
          visible: true,
          content: "Staff has been deleted",
        };
      });
    },
    archiveStaff(id) {
      this.$confirm(
        "Once archived, the staff will move to archived.",
        "Archive staff ?",
        {
          cancelButtonText: "Cancel",
          confirmButtonText: "Archive",
          cancelButtonClass: "gg_cancel_button",
          confirmButtonClass: "gg_submit_button",
          customClass: "gg_confirm",
        }
      ).then(() => {
        this.snackbarData = {
          visible: true,
          content: "Staff has been archived",
        };
      });
    },
    addStaffForm() {
      this.addStaffVisible = true;
    },
    submit(res) {
      console.log("done", res);
    },
  },
  created() {},
};
</script>
<style lang='less'>
//@import url(); 引入公共css类
</style>